<template>
  <div class="main">
      <div class="header" >
        <el-scrollbar style="height: 100%" :native="true">
          <div style="width: 100%" v-for="i in 10" :key="i">
            <el-row>
              <el-col :span="12">大红苹果</el-col>
              <el-col style="text-align:right;" :span="12">
                <i class="el-icon-circle-close"></i>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <p style="line-height: 16px">¥3.00</p>
              </el-col>
              <el-col style="text-align:right;" :span="12">
                <el-input-number
                  v-model="num" @change="handleChange"
                  :min="1" :max="10"
                  size="small"
                  label="描述文字"
                ></el-input-number>
              </el-col>
            </el-row>
          </div>
        </el-scrollbar>
      </div>
    <div class="bottom">
      <el-row >
        <el-col :span="12">总数：8</el-col>
        <el-col :span="12">合计：￥85.01</el-col>
      </el-row>
      <el-row >
        <el-col :span="24">改价：8</el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row >
        <el-col :span="24">合计：￥85.01</el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button size="" round>清空</el-button>
        <el-button size="" round>保存</el-button>
      </el-row>
      <el-row style="text-align: center">
        <el-button style="width: 90%" class="el-button--danger" size="" round>结算</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ItemList',
  data() {
    return {
      num: '1',
      itemLists:[],
      tableNum:0
    }
  },
  methods: {
    handleChange() {

    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 600px;
  display: flex;
  flex-direction: column;
  font-size: 17px;
  color: black;
  .header {
    height: 70%;
  }
  .bottom{
    height: 30%;
    margin-top: -17px;
    padding-top:5% ;
    background-color: white;
    z-index: 1;
    text-align: right;
    .el-row{
      margin-top: 10px;
    }
  }
}
</style>
